<template>
  <div>
    <!-- nav-bar
      this.$router.push() : 路由跳转
      this.$router.back() : 路由后退  ===== 页面中的后退按钮
    -->
    <van-nav-bar
      title="搜索中心"
      left-arrow
      @click-left="$router.back()"
    ></van-nav-bar>
    <!-- 1. 搜索区域 输入框 -->
    <van-search
      v-model.trim="keyword"
      show-action
      placeholder="请输入搜索关键词"
      @input="hGetSuggestion_throttle"
    >
      <!-- #action  ==== slot="action" -->
      <!-- <template slot="action">
        <div>搜索</div>
      </template> -->
      <div slot="action" @click="searchBtn">搜索</div>
    </van-search>

    <!-- 2. 搜索建议 -->
    <van-cell-group v-if="keyword">
      <van-cell
        icon="search"
        v-for="(item, idx) in hHighLight"
        :key="idx"
        @click="clickSuggestion(idx)"
      >
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>

    <!-- 3. 历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录" />

      <van-cell v-for="(item, idx) in history" :key="idx" :title="item" >
        <van-icon name="close" @click="hDelHistory(idx)"></van-icon>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getSuggestion } from '@/api/search.js'
import { getHistory, setHistory } from '@/store/history.js'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '',
      suggestions: [], // 关键词联想
      history: getHistory() || [], // 历史记录
      lastCallTimestamp: Date.now()
    }
  },
  methods: {
    // input输入框 处理 关键词联想
    // val 获取输入框中输入的数据
    async hGetSuggestion () {
      // 如果输入框没有内容，则让suggestion为空数组
      // 修复删除最后一个关键字时的报错bug和内容
      if (!this.keyword) {
        this.suggestions = []
        return
      }
      const res = await getSuggestion(this.keyword)
      // console.log('关键词联想', res)
      this.suggestions = res.data.data.options
    },
    // 以防抖的方式进行处理
    hGetSuggestion_debounce () {
      // 对其进行0.4s的防抖 ： 如果0.4s内没有再次调用它，则顺利执行这个函数，否则再等0.4s
      // 1. 每次先清除之前的计时器
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.hGetSuggestion()
      }, 0.4 * 1000)
    },
    // 以节流的方式进行处理
    hGetSuggestion_throttle () {
      if (Date.now() - this.lastCallTimestamp >= 0.4 * 1000) {
        this.hGetSuggestion()
        this.lastCallTimestamp = Date.now()
      } else {
        console.log('无法调用')
      }
    },
    // 添加历史记录
    addHistory (str) {
      // 1. 不能有重复项 先查找有没有重复项，若有进行删除，然后在进行添加
      const idx = this.history.findIndex(item => item === str)
      if (idx > -1) {
        // 说明存在重复项，进行删除
        this.history.splice(idx, 1)
      }
      // 2. 后加入的要放到数组的前面 unshift
      this.history.unshift(str)
      // 3. 本地持久化
      setHistory(this.history)
    },
    // 点击搜索按钮
    searchBtn () {
      // 1. 添加历史记录
      this.addHistory(this.keyword)
      // 2. 路由跳转到结果页
      this.$router.push({
        path: '/searchResult',
        query: {
          keyword: this.keyword
        }
      })
    },
    // 点击关键词联想
    clickSuggestion (idx) {
      // 不用传item，若是 this.addHistory(item) 会导致显示出颜色
      // 所以我们需要传下标，然后在suggestions中找到对应的内容，在进行添加

      // 1. 添加历史记录
      this.addHistory(this.suggestions[idx])
      // 2. 路由跳转到结果页
      this.$router.push({
        path: '/searchResult',
        query: {
          keyword: this.suggestions[idx]
        }
      })
    },
    // 删除历史记录
    hDelHistory (idx) {
      // 1. 删除对应项
      this.history.splice(idx, 1)
      // 2. 本地持久化 将删除后的覆盖之前存储的
      setHistory(this.history)
    }
  },
  computed: {
    // 处理关键字高亮显示
    hHighLight () {
      // g全局匹配 i不区分大小写
      const reg = new RegExp(this.keyword, 'gi')
      // 让关键词联想中的每一项，包含有搜索关键字的词语进行全局替换
      // 注意： 因为上面渲染的模式为text,我们需要使用v-html进行渲染
      // 渲染的参数从suggestions 改为 hHighLight
      return this.suggestions.map((item) => {
        return item.replace(reg, function (val) {
          return `<span style="color:red">${val}</span>`
        })
      })
    }
  }
}
</script>
